/* 
  学习目标：使用useState来声明一个count和msg数据
*/

// 1. 导入useState
import React, { useState } from 'react';

export default function App() {
  // 2. 调用useState()
  // 语法：
  // useState(初始值)
  // 返回值是数组， 结构数组得到两个变量，名字可以自定义。
  // count 等同于 state.count;  setCount是更新count的函数
  // 💥 它们俩是一对的，第一个代表获取，第二个代表更新
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Hello React');

  return (
    <div>
      {/* 3. 使用count变量 */}
      <h1> count的值： {count}</h1>
      <h2 onClick={() => setMsg(msg + '!')}> msg: {msg} </h2>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
    </div>
  );
}
